<template>
  <div class="list">
    <div class="list_1">
      <div @click="lengthSort(index)" v-for="(item,index) in arr1 " :key="index">{{item}}</div>
    </div>
    <div class="list_2">
      <div v-for="(item,index) in arr2" :key="index">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
    props: {//父向子传值，父组件在子组件自定义属性，子组件通过props来接收
        arr1: { type: Array, default: [] },
    arr2: { type: Array, default: [] }
    }
}
</script>

<style lang="scss" scoped>.list{
    margin-top: 10px;
}
.list_1{
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}
.list_2{
    display: flex;
    justify-content: space-between;
}
.list_2 div{
    margin: 2px;
    background-color: whitesmoke;
    border-radius: 5px;
    padding: 2px;
}
</style>